/* eslint-disable react/no-array-index-key */
import type { SwiperItemProps, TeacherReportData } from '../../interface'
import { StarFill } from 'antd-mobile-icons'
import styles from './index.module.less'

interface Props extends SwiperItemProps {
    multipleIndex: number
    data: TeacherReportData['expert_course_module']
}

export const NinthPage = (props: Props) => {
    const isActive = props.current === props.itemIndex

    return (
        <div className={styles.page}>
            <h4>您的2024年度考评项目</h4>
            <div className={isActive ? styles.active : styles.page_wrapper}>
                <div
                    className={styles.page_wrapper_content}
                    onTouchMove={e => {
                        e?.stopPropagation()
                    }}
                >
                    {props?.data?.map((item, index) => {
                        return (
                            <div key={index} className={styles.page_wrapper_content_item}>
                                <h6>
                                    {props.multipleIndex * 3 + index + 1}.
                                    <span>{item.course_name}</span>
                                </h6>
                                <section>
                                    <div className={styles.statistics}>
                                        <StarFill />
                                        <p>
                                            <span>{item.group_num}</span>期班级，
                                            <span>{item.student_num}</span>名参训学员
                                        </p>
                                    </div>
                                </section>
                            </div>
                        )
                    })}
                </div>
            </div>
            <div className={styles.page_bottom}>
                <p>2024的丰满成果</p>
                <p>是您与沃土一起创造的“独家记忆”</p>
            </div>
        </div>
    )
}

export default NinthPage
